<template>
	<view class="">
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<text class="text">我的</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>
		<view style="background: #FFFFFF; position: absolute;top: 0px;bottom: 0px;right: 0;left: 0;padding: 2px 0;">
		  <view class="content" >
		    <image class="image" src="../../static/my/my2x.jpg" mode="widthFix" />
		    <image class="textIcon" src="../../static/my/myTextIcon2x.png" mode="widthFix" />
		    <u-button style="margin-bottom: 4vh;"
		      type="primary" class="btn"
		      @click="onLogOut()"
		    >退出登录</u-button>
		  </view>
		</view>
	</view>
</template>
<script>
import { SystemController } from '@/api';
import {getBoundingClientRect} from "@/utils";

export default {
  data () {
		const {
			windowWidth,
			statusBarHeight
		} = uni.getSystemInfoSync(windowWidth, statusBarHeight)

		const rect = getBoundingClientRect(windowWidth, statusBarHeight)

    return {
			windowWidth: windowWidth,
			statusBarHeight: statusBarHeight,
			titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
			emptyWidth: rect.left - 10,
			headerHeight:0,
    }
  },
  methods: {
    onLogOut () {
      SystemController.logout(this).then(res => {
				uni.removeStorage({
					key:'token',
					success(res) {
						uni.reLaunch({
							url: '/pages/login/index'
						});
					}
				})
      });
    }
  }
}
</script>
<style scoped lang="scss">
	.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			.text {
				max-width: 60%;
				margin: 0 auto;
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
			}

			.nav-right {
				display: flex;

				.mobile-font {
					color: #707070;
					font-size: 36rpx;

					&+.mobile-font {
						margin-left: 12rpx;
					}
				}
			}
		}
.navbar-btm{
  border-bottom: 1px solid #E8E8E8;
}
.content{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}
.content .image{
  width: 100%;
  height: auto;
}
.content .textIcon{
  width: 70%;
  height: auto;
  margin: 0px 0 4vh 0;
}
.content p{
  width: 100%;
  color: #666666;
  font-size: 28rpx;
  margin: 10rpx 0 68rpx 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
.content p span{
  font-size: 32rpx;
  color: $u-type-primary;
}
.btn{
  width: 240rpx;
  height: 80rpx !important;
  border-radius: 8rpx !important;
}
</style>
